<template>
  <div>
    <div class="box">
      <table>
        <thead>
          <tr>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
            <td>周六</td>
            <td>周日</td>
          </tr>
          <tr>
            <td @click="addtask(k)" v-for="(v, k) in tasks" :key="k">
              <ul>
                <li
                  :style="{ 'text-decoration': v1.done ? 'line-through' : 'none' }"
                  v-for="(v1, k1) in v"
                  :key="k1"
                >
                  {{ v1.title }}<span v-if="v1.done">已完成</span>
                </li>
              </ul>
            </td>
          </tr>
        </thead>
      </table>
    </div>

    <div class="box2" v-if="current >= 0">
      <div class="form">
        <div>
          <button @click="current = -1">关闭</button>
        </div>
        <h1>周{{ dayName }}任务列表</h1>
        <ul>
          <li v-for="(v, k) in tasks[current]" :key="k">
            {{ v.title }}
            <button @click="setdone(k)" v-if="!v.done">完成</button>
            <span>已完成</span>
            <button @click="del(k)">删除</button>
          </li>
        </ul>
        <div>
          <textarea rows="2" v-model.trim="value" placeholder="填写任务"></textarea>
          <button @click="doadd">添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      tasks: Array.from({ length: 7 }, () => []),
      current: -1,
      value: "",
     
    };
  },
  // 计算属性
  computed: {
    dayName: function () {
      const n = this.current + 1;
      return n === 7 ? "日" : n;
    },
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    addtask: function (k) {
      this.current = k;
      console.log(this.current);
    },
    setdone: function (k) {
      this.tasks[this.current][k].done = true;
    },
    doadd: function () {
      if (this.value === "") {
        alert("内容不能为空");
        return;
      }
      this.tasks[this.current].push({
        title: this.value,
        done: false,
      });
      this.value = "";
    },
    del: function (k) {
      if (confirm("确定要删除吗？")) {
        this.tasks[this.current].splice(k, 1);
      }
    },
  },

  created() {},

  mounted() {},

  updated() {},
};
</script>

<style scoped>
td {
  border: 1px solid gray;
  height: 50px;
  text-align: center;
}
.form ul {
  list-style: none;
}
.box ul {
  list-style: none;
  text-align: center;
}
.box ul li {
  text-align: center;
}
</style>
